<template>
    <div class="bottom">
        <!-- 这是底部导航 -->
        <div class="bottom1">
            <a-row type="flex" justify="center" class="service">
      			<a-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="item1">
                    <div>
                        <img src="../assets/image/logo-bottom.svg" alt="">
                        <h2>浪琴官方网站</h2>
                    </div>
      			  	<router-link to="">浪琴官方网站</router-link>
                    <span>瑞士制造</span>
                    <router-link to="">品牌保修服务</router-link>
      			</a-col>
      			<a-col :span="8" class="hidden-xs-only item2"> 
                    <div>
                        <a-icon type="gift" class="icon1" />
                        <h2>免运费配送服务</h2>
                    </div>
      			  	<span>免运费服务</span>
      			</a-col>
      			<a-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="item3">
                    <div>
                        <a-icon type="credit-card" class="icon1" />
                        <h2>支付方式</h2>
                    </div>
      			  	<span>安全支付保障</span>
      			  	<span>在线支付方式</span>
                    <div>
                        <span class="iconfont icon-ai-pay-copy"></span>
                        <span class="iconfont icon-zhifubao"></span>
                        <span class="iconfont icon-wxpay"></span>
                    </div>
      			</a-col>
    		</a-row>
        </div>
        <div class="bottom2">
            <a-row type="flex" justify="center" class="footer">
      			<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <div>
                        <div>沪ICP备:16030460号-4</div>
                        <br>
                        ©  Longines Watch Co. Francillon Ltd., All rights reserved
                        <div>
                            <img src="../assets/image/表ia_10126.png" alt="">
                            沪公网安备 31010402007040号
                        </div>
                        <div>
                            <img src="../assets/image/表ia_10126.png" alt="">
                            查看营业执照
                        </div>
                    </div>
      			</a-col>
      			<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12"> 
                    <div class="footerRight">
                        <span>法律条款</span>
                        <span>客户服务</span>
                        <span>常见问题</span>
                    </div>
      			</a-col>
            </a-row>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
    .bottom{
        background-color: rgb(187, 81, 0);
        .bottom1 {
            width: 100%;
            padding: 35px 0 30px;
            background-color: #003570;
            .service {
                width: 90%;
                height: 210px;
                margin: 0px auto;
                color: #8097A9;
                .item1,
                .item2,
                .item3 {
                    line-height: 30px;
                    h2 {
                        color: white;
                        margin: 10px 0 30px; 
                    }
                    a {
                        color: #8097A9;
                    }
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: flex-start;
                    div {
                        text-align: left;
                        img {
                            width: 80px;
                            height: 26px;
                        }
                    }
                    .icon1 {
                        font-size: 26px;
                    }
                    .iconfont {
                        font-size: 20px;
                        margin: 0 5px;
                    }
                }
            }
        }
        .bottom2 {
            width: 100%;
            padding: 30px;
            background-color: #abb0b3;
            text-align: left;
            .footer {
                width: 90%;
                height: 106px;
                margin: 0px auto;
                color: white;
                .footerRight {
                    text-align: right;
                    span {
                        margin-right: 30px;
                    }
                }
            }
        }
    }
</style>>